<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./jquery-3.2.1.min.js"></script>
    <script>
        var socket;
 
 
        function star() {

            var userIds = document.getElementById('userId');
            var userId= userIds.value
            //wws为https，如果是http改为ws，OAWebSocket为后端Startup中间件的配置（app.Map("/OAWebSocket",），UserId传输链接的用户标识
            socket = new WebSocket('ws://localhost:5096/OAWebSocket?UserId=' + userId + '');
            textarea = document.getElementById('TextArea' + userId + '')
            socket.onopen = function (event) {
                textarea.value += '用户标识' + userId + '，已连接到WebSocket服务器:' + '\n';
                //socket.send('你好，服务器!');
            };
 
            socket.onmessage = function (event) {
 
                textarea.value += '接收消息:' + event.data + '\n';
            };
 
            socket.onclose = function (event) {
 
                textarea.value += '用户标识' + userId + '，已断开与WebSocket服务器的连接' + '\n';
            };
 
            socket.onerror = function (error) {
                console.log(error)
                textarea.value += 'WebSocket Error:' + error + '\n';
            };
        }
       /* function send() {
            var Text1 = document.getElementById('Text1');
            var Message = JSON.stringify({ "SenderId": "", "TargetId": "", "Content": Text1.value, "From": "" });
            var textarea = document.getElementById('TextArea1');
            textarea.value += "发送消息：" + Message + '\n';
            socket.send(Message);
        }*/
        function send1() {
            var Text2 = document.getElementById('Text2');
            var Message = JSON.stringify({ "SenderId": "", "TargetId": "", "Content": Text2.value, "From": "" });
            var textarea = document.getElementById('TextArea2');
            textarea.value += "发送消息：" + Message + '\n';
            socket.send(Message);
        }
        // 当需要关闭WebSocket连接时
        function end() {
            if (socket.readyState === WebSocket.OPEN) {
                socket.close(); // 发送关闭帧给服务器
            }
        }
    </script>
    <script>
        setInterval(updateUserCount, 5000); // 每5秒更新一次
        function updateUserCount() {
            fetch('http://localhost:5096/WebSocket/GetSumUser') // 调用后端API
                .then(response => response.json()) // 解析返回的JSON
                .then(data => {
                    // 假设你有一个元素用于显示用户数，例如<span id="userCount"></span>
                    document.getElementById('userCount').textContent = data; // 更新页面上的用户数
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }
    </script>
</head>
<body>
    当前连接人数<span id="userCount">0</span>
    <br />
 
   <!-- <input id="btn-kslj" type="button" onclick="star(1)" value="客户端标识1，开始连接" /><input id="btn-gb" type="button" onclick="end()" value="关闭链接" /><br />
    接收内容：<textarea id="TextArea1" rows="2" style="width:600px; height:300px;" cols="20"></textarea>
    发送内容：<input id="Text1" type="text" />
    <input id="fasong" type="button" onclick="send()" value="发送" />
    <br />-->
    <input id="userId" type="text" />
    <input id="btn-kslj2" type="button" onclick="star()" value="开始连接" /><br />
    接收内容：<textarea id="TextArea2" rows="2" style="width:600px; height:300px;" cols="20"></textarea>
    发送内容：<input id="Text2" type="text" />
    <input id="fasong" type="button" onclick="send1()" value="发送" />
 
 
</body>
</html>